<template>
  <div style="position: relative;background:#f8f8f8;padding-bottom:20px">
    <div style="height:50px;"></div>
    <div class="H2title" :class="isshow ? 'move' : ''" ref="pronbit">
      <h2 :style="$store.getters.screenWidth ? 'font-size:28px': ''">新闻资讯</h2>
    </div>
    <div>
      <div
        style="font-size:16px;font-weight:300;margin-top:20px"
        :style="$store.getters.screenWidth ? 'font-size:14px': ''"
      >NEWS</div>
      <div class="index_from_bottom" :style="$store.getters.screenWidth ? 'padding:10px 20px 10px': 'justify-content: space-between;'">
        <div
          class="center_news"
          @click="todetail(item.id)"
          :style="$store.getters.screenWidth ? 'width:100%': ''"
          v-for="(item,index) in bottom_list"
          :key="index"
        >
          <div class="center_news_item" :class="isshow ? 'movebottom' : ''">
            <div style="overflow:hidden;width:30%;max-height:120px;" :style="$store.getters.screenWidth ? 'max-height:100px;': ''">
              <img style="width:100%; transition: all 1s ease 0s;" :src="item.image" alt object-fit="fill" />
            </div>
            <div class="new_item_decs" style="text-align:left;">
              <h4 style="font-size:18px;font-weight:400">{{item.title}}</h4>
              <div style="overflow:hidden;word-break:break-all;text-overflow: ellipsis;font-size:15px;color:5e7387;font-weight:300;">
               {{item.synopsis.length > 80 ? item.synopsis.slice(0,80)+'...' : item.synopsis}}
              </div>
              <p style="color:5e7387;font-weight:300;font-size:14px">{{item.addTime.slice(0,10)}}</p>
            </div>
          </div>
        </div>
      </div>
      <router-link to="/news">
        <div class="more">查看更多</div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { articlExample } from "../api/api";
export default {
  name: "CenterTitle",
  props: {
    msg: String
  },
  data() {
    return {
      isshow: true,
      bottom_list: []
    };
  },
  components: {},
  mounted() {
    window.addEventListener("scroll", this.handleScrollx, true);
    this.articlExample();
  },
  methods: {
    async articlExample() {
      let data = await articlExample({
        cid: 101,
        pageNo: 0,
        pageSize: 10,
        pageType: "P",
        title: ""
      });
      this.bottom_list = data.data.data.splice(0,4);

    },
    todetail(id) {
      this.$router.push({
        path: "/newsDetail",
        query: { id: id }
      });
    },
    handleScrollx() {
      let llheight = document.body.clientHeight; //视窗高度
      if (this.$refs.pronbit) {
        let topheight = this.$refs.pronbit.getBoundingClientRect().top;
        if (llheight - topheight > 20) {
          this.isshow = true;
        } else {
          this.isshow = false;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.more {
  width: 150px;
  padding: 0 5px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  color: #2a333c;
  border: 1px solid #2a333c;
  font-size: 14px;
  margin: 0 auto;
  margin-bottom: 20px;
}
.more:hover {
  color: #fff;
  border: none;
  background-color: #62a8ea;
}
.H2title {
  width: 100%;
  margin-top: 60px;
  opacity:0;
  position: absolute;
  top: -150px;
}
.H2title h2 {
  font-size: 36px;
  font-weight: 300;
}
.move {
  animation: rotatep 1s linear 0.2s;
  animation-fill-mode: forwards;
}

@keyframes rotatep {
  0% {
    top: -80px;
    opacity: 0;
  }
  100% {
    top: -40px;
    opacity: 1;
  }
}
@keyframes rotatebottom {
  0% {
    transform: translate(0px, 50px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
.movebottom {
  animation: rotatebottom 1s linear 0.2s;
}
.index_from_bottom {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 40px 30px;
  background-color: #f8f8f8;
  .center_news {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 48%;
    .center_news_item {
      display: flex;
      overflow: hidden;
      
      &:hover div img {
        transform: scale(1.2);
      }
      .new_item_decs {
        padding: 0px 10px;
        box-sizing: border-box;
        display: flex;
        // justify-content: space-between;
        flex-direction: column;
        // background-color: #fff;
        flex: 1;
      }
    }
  }
}
</style>
